@extends('backend.layout')
@section('style')
    <link href="/css/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">

@endsection
@section('content')
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>Data Tables</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a>Tables</a>
                </li>
                <li class="active">
                    <strong>Data Tables</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Basic Data Tables example with responsive plugin</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">Config option 1</a>
                                </li>
                                <li><a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="table-responsive">
                            <div id="toolbar">
                                <button id="remove" class="btn btn-danger" disabled>
                                    Delete
                                </button>
                            </div>

                            <table id="table"
                                   data-toolbar="#toolbar"
                                   data-search="true"
                                   data-show-refresh="true"
                                   data-show-toggle="true"
                                   data-show-columns="true"
                                   data-show-export="true"
                                   data-detail-view="true"
                                   data-detail-formatter="detailFormatter"
                                   data-minimum-count-columns="2"
                                   data-show-pagination-switch="true"
                                   data-pagination="true"
                                   data-id-field="id"
                                   data-page-list="[10, 25, 50, 100, ALL]"
                                   data-show-footer="false"
                                   data-side-pagination="server"
                                   data-url="http://issues.wenzhixin.net.cn/examples/bootstrap_table/data"
                                   data-response-handler="responseHandler">
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="/js/plugins/bootstrap-table/bootstrap-table.js"></script>
    <script src="/js/plugins/bootstrap-table/bootstrap-table-export.js"></script>
    <script>
        var $table = $('#table'),
                $remove = $('#remove'),
                selections = [];

        function initTable() {
            $table.bootstrapTable({
                height: getHeight(),
                columns: [
                    [
                        {
                            field: 'state',
                            checkbox: true,
                            align: 'center',
                            valign: 'middle'
                        },
                        {
                            title: 'Item ID',
                            field: 'id',
                            align: 'center',
                            valign: 'middle',
                            sortable: true,
                            footerFormatter: totalTextFormatter
                        },
                        {
                            field: 'name',
                            title: 'Item Name',
                            sortable: true,
                            footerFormatter: totalNameFormatter,
                            align: 'center'
                        },
                        {
                            field: 'price',
                            title: 'Item Price',
                            sortable: true,
                            align: 'center',
                            footerFormatter: totalPriceFormatter
                        },
                        {
                            field: 'operate',
                            title: 'Item Operate',
                            align: 'center',
                            events: operateEvents,
                            formatter: operateFormatter
                        }
                    ]
                ]
            });
            // sometimes footer render error.
            setTimeout(function () {
                $table.bootstrapTable('resetView');
            }, 200);
            $table.on('check.bs.table uncheck.bs.table ' +
                    'check-all.bs.table uncheck-all.bs.table', function () {
                $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

                // save your data, here just save the current page
                selections = getIdSelections();
                // push or splice the selections if you want to save all data selections
            });
            $table.on('expand-row.bs.table', function (e, index, row, $detail) {
                if (index % 2 == 1) {
                    $detail.html('Loading from ajax request...');
                    $.get('LICENSE', function (res) {
                        $detail.html(res.replace(/\n/g, '<br>'));
                    });
                }
            });
            $table.on('all.bs.table', function (e, name, args) {
                console.log(name, args);
            });
            $remove.click(function () {
                var ids = getIdSelections();
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: ids
                });
                $remove.prop('disabled', true);
            });
            $(window).resize(function () {
                $table.bootstrapTable('resetView', {
                    height: getHeight()
                });
            });
        }

        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            });
        }

        function responseHandler(res) {
            $.each(res.rows, function (i, row) {
                row.state = $.inArray(row.id, selections) !== -1;
            });
            return res;
        }

        function detailFormatter(index, row) {
            var html = [];
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>');
            });
            return html.join('');
        }

        function operateFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" title="Like">',
                '<button class="btn btn-primary btn-sm">编辑</button>',
                '</a>  ',
                '<a class="remove" href="javascript:void(0)" title="Remove">',
                '<button class="btn btn-danger btn-sm">删除</button>',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .like': function (e, value, row, index) {
                alert('You click like action, row: ' + JSON.stringify(row));
            },
            'click .remove': function (e, value, row, index) {
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
            }
        };

        function totalTextFormatter(data) {
            return 'Total';
        }

        function totalNameFormatter(data) {
            return data.length;
        }

        function totalPriceFormatter(data) {
            var total = 0;
            $.each(data, function (i, row) {
                total += +(row.price.substring(1));
            });
            return '$' + total;
        }

        function getHeight() {
            return $(window).height() - $('h1').outerHeight(true);
        }

        $(function () {
            var scripts = [
                        location.search.substring(1) || 'js/plugins/bootstrap-table/bootstrap-table.js',
                        'js/plugins/bootstrap-table/bootstrap-table-export.js',
                    ],
                    eachSeries = function (arr, iterator, callback) {
                        callback = callback || function () {};
                        if (!arr.length) {
                            return callback();
                        }
                        var completed = 0;
                        var iterate = function () {
                            iterator(arr[completed], function (err) {
                                if (err) {
                                    callback(err);
                                    callback = function () {};
                                }
                                else {
                                    completed += 1;
                                    if (completed >= arr.length) {
                                        callback(null);
                                    }
                                    else {
                                        iterate();
                                    }
                                }
                            });
                        };
                        iterate();
                    };
            eachSeries(scripts, getScript, initTable);
        });
        function getScript(url, callback) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.src = url;
            var done = false;
            // Attach handlers for all browsers
            script.onload = script.onreadystatechange = function() {
                if (!done && (!this.readyState ||
                        this.readyState == 'loaded' || this.readyState == 'complete')) {
                    done = true;
                    if (callback)
                        callback();
                    // Handle memory leak in IE
                    script.onload = script.onreadystatechange = null;
                }
            };
            head.appendChild(script);
            // We handle everything using the script element injection
            return undefined;
        }
    </script>
@endsection